Codes
Code your ideas for understanding of natural systems
Updated at 2020.11.01
Updated at 2020.10.09
Intro
블레이져에서 컴포넌트는 C#의 클래스와 동일하다. 웹에서 필요한 기능을 모듈화할 수 있는 아주 좋은 수단이다. C#에 익숙하다면 참신한 아이디어로 클래스를 Razor 문법과 결합하여 쉽게 웹을 개발할 수 있게 하였다.
참고 사이트: Blazor University - Components
Basics
Razor
파일 또는 페이지는 컴포넌트(Component)로 사용될 수 있다. 컴포넌트로 사용될 때는 설정된 레이아웃은 무시된다.컴포넌트로 사용하는 방법은
Tag Element
처럼 Razor파일에 추가하면 된다. 예를 들어/Pages/Counter.razor
파일은<Counter/>
또는<Counter></Counter>
를 추가하면 임베디드된 페이지가 나타난다. 아주 강력한 기능이다.Counter.razor
Index.razor
One-way Binding
Counter을 증가시키는 양을 Index.razor
에서 입력받기
Counter.razor
에Parameter
추가
Index.razor
에서Counter
컴포넌트의 파라미터 값을 추가하여 호출하기
Component Events
컴포넌트에서 특정 상황에서 이벤트를 발생시켜 컴포넌트를 호출한 쪽에서 그 이벤트를 받아서 원하는 작업을 수행하기
- Event 발생 시키기:
Counter Component
(Counter.razor
)에서 3의 배수일 때만 Event 발생
- Event를 받아서 처리하기 (3의 배수 값을 출력하기)
Two-way Binding
Remind: One-way Binding
MyComponent.razor
Counter.razor
Counter.razor
에서 Click me
버튼을 클릭하면 CurrentCount
와 MyComponent
내의 CurrentCounterValue
값이 모두 바뀐다. 하지만 Update
버튼을 클릭하면 MyComponent
내의 CurrentCounterValue
값만 바뀐다.
하부 컴포넌트에서 값을 변경할 때 상부 컴포넌트에서도 값이 바뀌게 하려면 어떻게 해야 할까?
Parameter two way binding
파라미터 양방향 바인딩
우선 호출하는 부분을 하기 같이 변경한다.
그리고 MyComponent.razor
파일에 Component Events를 활용하면 쉽게 구현이 가능하다.
MyComponent.razor
를 다음과 같이 변경한다.
총 17 개의 글이 있습니다.
# | 제목 | 날짜 | 조회수 |
---|---|---|---|
01 | CS 배우기 요약 | 2021/06/07 | 259 |
02 | CS Statements | 2021/06/07 | 221 |
03 | 퍼셉트론 | 2021/04/15 | 217 |
04 | Blazor and Sqlite | 2021/04/15 | 261 |
05 | Blazor Layouts | 2021/04/15 | 264 |
06 | CS Language Reference | 2021/06/07 | 245 |
07 | VSCode and Markdown | 2021/04/15 | 241 |
08 | Blazor에서 이미지파일 다루기 | 2021/06/10 | 361 |
09 | Blazor and Markdown | 2021/04/15 | 308 |
10 | 종속성 주입 | 2021/06/07 | 248 |
11 | Blazor에서 데이터 다루기 | 2021/06/07 | 244 |
12 | Blazor Components | 2021/04/15 | 244 |
13 | CS Glossary | 2021/06/07 | 260 |
14 | Enum 타입 다루기 | 2021/12/14 | 248 |
15 | 생활코딩 CS01 | 2022/04/25 | 419 |
16 | 생활코딩 CS02 | 2022/04/30 | 307 |
17 | 생활코딩 CS03 | 2022/04/30 | 652 |